<template>
  <Row>
    <div class="bg-light lter b-b wrapper-md clearfix titleBtns w-p" style="color: black">
      <h4 class="m-n font-thin pull-left">系统设置 > 用户管理 > 角色管理 </h4>
    </div>
    <div class="wrapper-md" >
      <div class="panel panel-default form-horizontal form" role="form" >
        <div class="bg-light lter b-b wrapper-md clearfix titleBtns w-p" style="margin-bottom:10px;margin-top: 10px;color: black">
          <h4 class="m-n font-thin pull-left">查询条件 </h4>
        </div>
        <Row type="flex" justify="space-between" class="control" style="color: gainsboro">
          <div class="search-bar">
            <label style="color: black">角色名称(中文) :</label>
            <Input placeholder=" 角色名称（中文）" v-model="nameZh" style="width: 200px; margin-right:10px" ></Input>
            <label style="color: black">角色名称(英文) :</label>
            <Input placeholder=" 角色名称（英文）" v-model="nameEn" style="width: 200px ; margin-right:10px"></Input>
            <Button  @click="search" style="color: black" type="primary"><Icon type="ios-search"><i class="fa fa-search"></i></Icon>查询</Button>
          </div>
        </Row>
        <div class="bg-light lter b-b wrapper-md clearfix titleBtns w-p" style="color: black">
          <h4 class="m-n font-thin pull-left">角色列表 </h4>
        </div>
        <Row type="flex" justify="space-between" class="control" style="color: gainsboro;margin-top: 10px;margin-bottom: 10px">
          <div class="table-style">
            <Button @click="userAdd = true" style="margin: 5px;background-color: cornflowerblue" ><Icon type="plus-round"><i class="fa fa-plus"></i></Icon> 新增</Button>
            <Button @click="userEdit = true" style="margin: 5px;background-color: cornflowerblue"><Icon type="edit"><i class="fa fa-plus"></i></Icon> 编辑</Button>
            <Button @click="userDel = true" style="margin: 5px;background-color: cornflowerblue"><Icon type="close"><i class="fa fa-plus"></i></Icon> 删除</Button>
            <Button @click="download = true" style="margin: 5px;background-color: cornflowerblue"><Icon type="arrow-down-a"><i class="fa fa-plus"></i></Icon>Excel</Button>
            <Button @click="empower = true" style="margin: 5px;background-color: cornflowerblue"><Icon type="hammer"><i class="fa fa-plus"></i></Icon> 授权</Button>

          </div>
        </Row>

        <!-- 2.2 显示内容表格 -->
        <Table stripe :data="tableData"
               :columns="tableColumns"
               @on-select="onSelect"
               @on-select-all="onSelectAll"
               @on-selection-change="onSelectionChange">
        </Table>
        <!-- 2.3 分页导航navigation -->
        <Row type="flex" justify="space-between" class="footer">
          <div></div>
          <div style="margin: 10px;overflow: hidden">
            <Page :total="total" @on-page-size-change="pageSizeChange" @on-change="changePage" :current="pageNumber" :pageSize="pageSize" size="small" placement="top" show-elevator show-sizer ></Page>
          </div>
        </Row>
      </div>
    </div>
  </Row>
</template>

<script>
  export default {
    data () {
      return {
        tableColumns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: 'id',
            key: 'id'
          },
          {
            title: '角色名称(中文)',
            key: 'roleZh'
          },
          {
            title: '角色名称(英文)',
            key: 'roleEn'
          },
          {
            title: '描述',
            key: 'description'
          },
          {
            title: '所属部门',
            key: 'departmentName'
          },
          {
            title: '可编辑',
            key: 'editable'
          },
          {
            title: '创建时间',
            key: 'createdDate'
          },
          {
            title: '更新时间',
            key: 'updatedDate'
          }

        ]
      }
    }
  }
</script>
